<template>
  <!-- //class="iosApp"  -->
 <div  >
  <router-view v-slot="{ Component }">
      <keep-alive :exclude="exclude">
        <component :is="Component" :key="routerKey"  />
      </keep-alive>
  </router-view>
  <div class="Version_cover" v-if="state.VersionFlag">
      <div class="center_box">
        <h1>发现新版本</h1>
        <div class="btn" @click="Upgrade" >前往升级</div>
      </div>
    </div>
 </div>
</template>
<script setup>

import { App } from '@capacitor/app'
import { onMounted, reactive, ref } from "vue";
import axios from "axios";
const router = useRouter()
const route = useRoute()
const state  = reactive({
  Website: "", //更新的官网地址
  VersionFlag: false, //版本提示开关
  myVersion: "1.7.0" //当前版本号
})
const routerKey = ref(route.fullPath)
const exclude = ['ChatAi']
// localStorage.setItem('islogin', false)
const list = () => {
  axios('http://111.230.43.228:8060/jicha_app_info.php').then(res => {
  if (res.data.code==1) {
    if (res.data.data.verAndroid.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')  > state.myVersion.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '')) {
      state.VersionFlag=true
    state.Website = res.data.data.androidUrl
    }else {
      state.VersionFlag=false
   }
  }
})
}
const  Upgrade = () => {
      plus.runtime.openURL( state.Website);
  }
onMounted(() => {
  App.addListener('backbutton', function (data) {
    const { canGoBack } = data
    if (canGoBack) {
      router.back()
    } else {
      App.exitApp()
      return
    }
    
    if (route.name === 'Nav') {
      App.exitApp()
    }
  }, false);
  // list()
})


watch(() => route.fullPath, () => {
  routerKey.value = route.fullPath
})

</script>
<style lang="scss">
.Version_cover {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;

  .center_box {
    width: 12rem;
    height: 6rem;
    border-radius: 0.533333rem;
    background: rgba(255, 255, 255);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    h1 {
      width: 100%;
      text-align: center;
      font-size: 0.9rem;
      padding: 0.266666rem 0;
    }


    .btn {
      width: 80%;
      height: 1.6rem;
      background: #FADA5C;
      border-radius: 0.533333rem;
      font-size: 0.7rem;
      color:#000;
      line-height: 1.6rem;
      text-align: center;
      letter-spacing: 1px;
      position: absolute;
      bottom: 0.866666rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
